<template>
  <section class="page">
    <headerbar>{{title}}</headerbar>
    <ul class="tab">
      <li v-if="!(!this.$store.state.isDang && this.sendOrigin === '1')" @click="clickMenu(0)" :class="{'active':tabIndex==0}"><span>人员选择</span></li>
      <li v-if="!this.$store.state.isDang && this.sendOrigin === '1'" @click="clickMenu(0)" :class="{'active':tabIndex==0}"><span>组织选择</span></li>
      <li v-if="!(!this.$store.state.isDang && this.sendOrigin === '1')" @click="clickMenu(1)" :class="{'active':tabIndex==1}"><span>已选人员</span></li>
      <li v-if="!this.$store.state.isDang && this.sendOrigin === '1'" @click="clickMenu(1)" :class="{'active':tabIndex==1}"><span>已选组织</span></li>
    </ul>
    <section v-if="isAllUser && tabIndex==0" class="input-wrap pdh-4 pdv-3 bg-white search">
      <input v-if="!(!this.$store.state.isDang && this.sendOrigin === '1')" type="search" v-model="keyword" placeholder="姓名搜索">
      <input v-if="!this.$store.state.isDang && this.sendOrigin === '1'" type="search" v-model="keyword" placeholder="组织搜索">
    </section>

      <!--支部成员-->
      <section class="d-scroll mgt-2" v-if="tabIndex==0">
        <section class="people-list ">
          <div @click="select(item)" v-for="item in list" class="people-item block noborder">
            <section class="people-info">
              <div class="avatar-img">
                <img src="../../../../static/images/default.jpg" alt="">
              </div>
              <!--组织-->
              <span v-if="sendOrigin==1" class="name">{{item.orgName || item.userName}}</span>
              <!--人名-->
              <span v-if="sendOrigin!=1" class="name">{{item.userName}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span v-if="sendOrigin!=1" class="name">{{item.orgName}}</span>
            </section>
            <span class=""><span :class="{'icon-radio-checked':selectedIndexOf(item)>=0}" class="icon-radio"></span></span>
          </div>

        <p class="pdv-5"></p>
        <p class="pdv-5"></p>
        </section>
      </section>
      <!--支部成员-->
      <section class="d-scroll mgt-2" v-if="tabIndex==1">
        <section class="people-list ">
          <div @click="select(item)" v-for="item in checkedList" class="people-item block noborder">
            <section class="people-info">
              <div class="avatar-img">
                <img src="../../../../static/images/default.jpg" alt="">
              </div>
              <!--组织-->
              <span v-if="sendOrigin==1" class="name">{{item.orgName || item.userName}}</span>
              <!--人名-->
              <span v-if="sendOrigin!=1" class="name">{{item.userName}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span v-if="sendOrigin!=1" class="name">{{item.orgName}}</span>
            </section>
            <span class=""><span :class="{'icon-radio-checked':selectedIndexOf(item)>=0}" class="icon-radio"></span></span>
          </div>

        <p class="pdv-5"></p>
        <p class="pdv-5"></p>
        </section>
      </section>

      <section class="foot-action">
        <div class="inner">
          <span v-if="!isRadio && canCheck" @click="checkAll()" class="text"><span :class="{'icon-radio-checked':checkedList.length==list.length}" class="icon-radio"></span> <span>&nbsp;全选</span></span>
          <span  v-if="isRadio"></span>
          <div class="btn" @click="save()">
            <div class="default-block-btn">确定</div>
          </div>
        </div>
      </section>
  </section>
</template>


<script>
  import _ from 'lodash'
  import tools from '@/utils/tools'
  export default {
    name: 'personnelSelection',
    data () {
      return {
        keyword: '',
        list: [],
        checkedList: [],
        organizationalLifeAdd: this.$store.state.organizationalLifeAdd,
        modelName: '',
        title: '',
        isRadio: false,
        fromOrg: false,
        formState:'',
        sendOrigin: '-1',
        searchTipName: '姓名搜索',
        canCheck: true,
        tabIndex: 0
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      this.modelName = this.$route.params.modelName
      this.sendOrigin = this.$store.state.sendOrigin || '-1'
      this.isRadio = this.$route.query.isRadio === '1'
      this.fromOrg = this.$route.query.fromOrg === '1'
      this.formState = this.$route.query.formState
      if (this.sendOrigin === '1') {
        this.title = '选择组织'
      } else {
        this.title = '选择人员'
      }
      if (!this.$store.state.isDang && this.sendOrigin === '2') {
        this.canCheck = false
      } else {
        this.loadData()
      }
      if (!this.$store.state.isDang && this.sendOrigin === '1') {
        this.searchTipName = '组织搜索'
      }
    },
    watch: {
      keyword (val) {
        this.findNextAllUserList()
      }
    },
    methods: {
      searchName (item) {
        if (this.keyword) {
          return item.userName.indexOf(this.keyword) >= 0
        }
        return true
      },
      isAllUser () {
        return this.sendOrigin != 1 && !this.$store.state.isDang
      },
      loadData () {
        if (this.$store.state['checkedList' + this.modelName]) {
          this.checkedList = this.$store.state['checkedList' + this.modelName]
        }
        let data = {
          loginId: this.userInfo.id || '3750'
        }
        if (this.sendOrigin === '1') {
          /*组织*/
          this.title = '选择组织'
          this.fetchService.findNextOrgUserList(data).then(res => {
            if (res.code === 0) {
              console.log(res)
              this.list = res.data
            } else {
              this.tools.tip(res.message)
            }
          })
        } else if(this.isRadio && this.fromOrg && this.formState === 'add'){ //主持人和记录人的选择
          this.title = '选择人员'
          this.list = JSON.parse(sessionStorage.getItem("checkedListOrganization"))
        } else {
          this.title = '选择人员'
          if (this.isAllUser () && !this.fromOrg) {//查询下级所有党员 发通知用
            return this.findNextAllUserList()
          }
          this.fetchService.findDzbUserList(data).then(res => {//组织生活使用 查询本支部的
            if (res.code === 0) {
              console.log(res)
              this.list = res.data
            } else {
              this.tools.tip(res.message)
            }
          })
        }
      },
      // 所有党员 findNextAllUserList
      findNextAllUserList () {
        let data = {
          loginId: this.userInfo.id || '3750',
          userName: this.keyword
        }
        this.tools.showLoading()
        this.fetchService.findNextAllUserList(data).then(res => {
          this.tools.hideLoading()
          if (res.code === 0) {
            console.log(res)
            this.list = res.data
          } else {
            this.tools.tip(res.message)
          }
        })
      },
      checkAll () {
        if (this.checkedList.length === this.list.length) {
          this.checkedList = []
        } else {
          this.checkedList = [].concat(this.list)
        }
      },
      selectedIndexOf (item) {
        let index = -1
        this.checkedList.some((v, i) => {
          if (item.id === v.id) {
            index = i
            return false
          }
        })
        return index
      },
      select (item) {
        let index = this.selectedIndexOf(item)
        if (index >= 0) {
          this.checkedList.splice(index, 1)
        } else {
          this.checkedList.push(item)
        }
        if (this.isRadio) {
          this.checkedList = [item]
        }
      },
      save () {
        this.$store.state['checkedList' + this.modelName] = this.checkedList
        console.log('this.isRadio',this.isRadio);
        console.log('this.fromOrg',this.fromOrg);
        if(!this.isRadio || !this.fromOrg){ //只有选择人员的时候
          sessionStorage.setItem("checkedListOrganization", JSON.stringify(this.checkedList));//设置所选的参会人员，因为主持人和记录人只能从参会人里面选
        }
         let keys = []
        let values = []
        this.checkedList.forEach((v) => {
          keys.push(v.id)
          values.push(v.userName)
        })
        this.$store.state.organizationalLifeAddData[this.modelName] = values.join(',')
        this.$store.state.organizationalLifeAddData[this.modelName.replace('Name', 'Id')] = keys.join(',')
        tools.back()
      },
      clickMenu (index) {
        this.tabIndex = index
      }
    }
  }
</script>

<style scoped lang="scss">
  .search {
    input {
      height:60px;
      line-height:60px;
      font-family:dang;
      margin:0;
      font-size:14PX;
    }
  }
</style>
